<template>
  <div class="personal-info">
    <van-nav-bar
      left-arrow
      title="个人信息"
      class="nav-bar"
      left-text="返回"
      @click-left="onClickLeft"
    />
    <!-- 基础信息列表 -->
    <van-cell-group class="info-list">
      <!-- 编辑头像 -->
      <van-cell
        title="编辑头像"
        is-link
        @click="handleEditAvatar"
      >
        <template #right-icon>
          <van-image
            round
            :src="require('@/assets/images/head-img.jpg')" 
            width="40"
            height="40"
          />
        </template>
      </van-cell>

      <!-- 昵称 -->
      <van-cell
        title="昵称"
        :value="nickname"
        is-link
        @click="showNicknamePopup = true"
      />
      <!-- 收货地址 -->
      <van-cell
        title="收货地址"
        value="请选择"
        is-link
        @click="handleEditAddress"
      />

      <!-- 个人主页公开（开关） -->
      <van-cell
        title="个人主页公开"
        is-link
      >
        <template #right-icon>
          <van-switch v-model="isPublic" />
        </template>
      </van-cell>

      <!-- 我的发布 -->
      <van-cell
        title="我的发布"
        is-link
        @click="handleMyPosts"
      />

      <!-- 我的关注 -->
      <van-cell
        title="我的关注"
        is-link
        @click="handleMyFollows"
      />
    </van-cell-group>

    <!-- 婚礼信息模块（灰色标题区分） -->
    <div class="wedding-info-title">婚礼信息</div>

      <van-cell-group class="wedding-info-list">
      <!-- 身份选择单元格 -->
      <van-cell
      title="身份"
      :value="identity"
      is-link
      @click="showIdentityPicker = true"
    />

      <!-- 婚礼场次-->
      <van-cell
        title="婚礼场次"
        is-link
        @click="handleAddWedding"
      >
        <template #right-icon>
          <span class="add-btn">+ 添加</span>
        </template>
      </van-cell>

      <!-- 婚礼详情 -->
      <van-cell
        title="婚礼详情"
        :value="invitationValue"
        readonly
        is-link
      >
      </van-cell>
    </van-cell-group>
     <!-- 昵称编辑弹窗 -->
    <van-popup
      v-model:show="showNicknamePopup"
      position="center"
      round
      :style="{ width: '85%', padding: '20px' }"
    >
      <div class="popup-content">
        <h3 class="popup-title">修改昵称</h3>
        <!-- 输入框 -->
        <van-field
          v-model="tempNickname"
          placeholder="请输入新昵称"
          maxlength="10"
          clearable
          class="nickname-input"
          @input="handleInput"
        />
        <p class="input-tip">
          {{ tempNickname.length }}/10 字符
        </p>

        <!-- 按钮组 -->
        <div class="btn-group">
          <van-button
            type="default"
            round
            class="cancel-btn"
            @click="showNicknamePopup = false"
          >
            取消
          </van-button>
          <van-button
            type="primary"
            round
            class="confirm-btn"
            :disabled="!isNicknameValid"
            @click="confirmNicknameChange"
          >
            确认
          </van-button>
        </div>
      </div>
    </van-popup>

  <!-- 身份选择器弹出层 -->
  <van-popup
      v-model:show="showIdentityPicker"
      position="bottom"
    >
      <van-picker
        :model-value="pickerValue"
        :columns="identityOptions" 
        @confirm="handleConfirm"
        @cancel="showIdentityPicker = false"
      />
    </van-popup>
  </div>
</template>

<script setup>
import { ref , onMounted,computed} from 'vue';
import { 
  NavBar, Cell, CellGroup, Image, Switch, Icon, 
  Popup, Field, Button, Picker
} from 'vant';
import api from '@/api';

const user=JSON.parse(localStorage.getItem("user"))

const isPublic = ref(false);
const nickname = ref(user?.username?.trim() || '' );
const showNicknamePopup = ref(false);
const tempNickname = ref(''); 

// 当前选中的身份
const identity = ref(user?.identity?.trim() || '' ); 
// 控制弹出层显示
const showIdentityPicker = ref(false);
const pickerValue = ref([]);
// 身份选项数据
const identityOptions = [
      { text: '新郎', value: 'Xinlang' },
      { text: '新娘', value: 'Xinniang' },
      { text: '父母', value: 'Fumu' },
      { text: '亲友', value: 'Qinyou' },
    ];
const onClickLeft = () => history.back();

const handleEditAvatar = () => {
  console.log('编辑头像');

};

//修改昵称
const isNicknameValid = computed(() => {
  const value = typeof tempNickname.value === 'string' ? tempNickname.value : '';
  return value.trim().length > 0 && value.length <= 10;
});

const handleEditNickname = () => {
  tempNickname.value = String(nickname.value); 
  showNicknamePopup.value = true;
};

const id=user.fere
const confirmNicknameChange = () => {
  const newNickname = String(tempNickname.value).trim();
  if (newNickname && newNickname.length <= 10) {
    nickname.value = newNickname;
    api.postReq("/update",{ username: newNickname ,id:id }
    ).then(res=>{
      let result=res.data;
      if (result.code==1){
        showSuccessToast(result.msg)
        console.log(result.msg)
        showNicknamePopup.value = false;
      }else{
        showFailToast(result.msg)
        console.log(result.msg)
      }
    })
  } 
};

const handleEditAddress = () => {
  console.log('选择收货地址');
  // 可扩展：打开地址选择组件
};

const handleMyPosts = () => {
  console.log('查看我的发布');
  // 可扩展：跳转到“我的发布”页面
};

const handleMyFollows = () => {
  console.log('查看我的关注');
  // 可扩展：跳转到“我的关注”页面
};

// 处理选择身份确认
const handleConfirm = ({ selectedValues, selectedOptions }) => {
    showIdentityPicker.value = false;
    pickerValue.value = selectedValues;
    identity.value = selectedOptions[0].text;
    api.postReq("/update",{ identity: selectedOptions[0].text ,id:id }
    ).then(res=>{
      let result=res.data;
      if (result.code==1){
        showSuccessToast(result.msg)
        console.log(result.msg)
        showNicknamePopup.value = false;
      }else{
        showFailToast(result.msg)
        console.log(result.msg)
      }
    })
};

const handleAddWedding = () => {
  console.log('添加婚礼场次');
  // 可扩展：打开婚礼场次添加表单
};

const invitationValue = ref([
  user?.weddinginfo?.time?.trim() || '去填写',
  user?.weddinginfo?.city?.trim() || '去填写',
  user?.weddinginfo?.budget?.trim() || '去填写'
].join(' '));
</script>

<style scoped>
.personal-info {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.nav-bar {
  background-color: #fff;
}

.info-list {
  background-color: #fff;
  margin-top: 10px;
}

.wedding-info-title {
  font-size: 14px;
  color: #999;
  padding: 10px 15px;
  background-color: #f5f5f5;
  margin-top: 10px;
}

.wedding-info-list {
  background-color: #fff;
}

.add-btn {
  color: #ff4d4f;
  font-size: 14px;
}

.van-cell__right-icon {
  display: flex;
  align-items: center;
}

/* 昵称弹窗样式 */
.popup-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.popup-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin: 0;
}
.nickname-input {
  margin-top: 10px;
}
.input-tip {
  font-size: 12px;
  color: #999;
  text-align: right;
  margin: -10px 0 10px 0;
}
.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}
.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 10px 0;
}
.confirm-btn {
  background: linear-gradient(to right, #ff6034, #ee0a24) !important;
  border: none !important;
}
</style>